<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8"%>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zh">
<!--<![endif]-->
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>保险代理后台管理系统</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />
    <!-- ================== BEGIN BASE CSS STYLE ================== -->
    <jsp:include page="../common/header.jsp"></jsp:include>
    <%@include file="../common/taglib.jsp"%>
    <!-- ================== END BASE CSS STYLE ================== -->

    <!-- ================== 单独作用于本页表格td ================== -->
    <style>
        .form-control{
        	width:200px;
        }
        tr td:first-child, tr th:first-child{
        	text-align:center;
        }
    </style>
    <!-- ================== 单独作用于本页表格td ================== -->

</head>
<body>
<!-- begin #page-loader -->
<div id="page-loader" class="fade in"><span class="spinner"></span></div>
<!-- end #page-loader -->

<!-- begin #page-container -->
<div id="page-container" class="fade page-sidebar-fixed page-header-fixed">
    <jsp:include page="../common/top.jsp"/>

    <!-- begin #sidebar -->
    <jsp:include page="../common/sitebar.jsp"/>
    <div class="sidebar-bg"></div>
    <!-- end #sidebar -->

    <!-- begin #content -->
    <div id="content" class="content">       
        <div class="row">
            <!-- begin col-12 -->
            <div class="col-md-12">
                <!-- begin panel -->
                <div class="panel panel-inverse">
                    <section class="pad-top-10 pad-bottom-20">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tab1" data-toggle="tab">投保客户</a></li>
                            <li><a href="#tab2" id="detail" data-toggle="tab" class="hidden">客户详情</a></li>
                        </ul>
					<div class="panel-body">
                        <div class="table-responsive">
                        <div class="form-wrap mar-bottom-0">
                            <div class="tab-content">
                            
                            <!-- 投保客户列表 -->
                                <div id="tab1" class="tab-pane fade active in">
                                	<section>
                                		<form class="form-inline">
                                			<div class="form-group">
                                				<label>被保险人：</label>
                                				<input type="text" id="insurant" class="form-control m-r-20" style="position: relative;width: 100px;">
                                			</div>
                                			<div class="form-group">
                                				<label>保险公司：</label>
                                				<input type="text" id="insurant" class="form-control m-r-20" style="position: relative;width: 100px;">
                                				<select id="insyrerId" class="form-control" style="list-style-type: none;width:100px;">
                                                          <option value="">请选择</option>
                                                          <c:forEach items="${insurerList }" var="insurer">
                                                                <option value="${insurer.tid }">${insurer.name }</option>
                                                          </c:forEach>
                                                </select>
                                			</div>
                                			<div class="form-group" style="position: relative;">
                                				<label>渠道：</label>
                                				<input type="hidden" name="channelId" id="channelId">
                                				<input type="text" id="channels" name="channel" data-toggle="dropdown"  class="form-control m-r-20 dropdown-toggle" placeholder="渠道" />
                                				<ul id="chs" class="dropdown-menu" style="max-height: 200px;overflow: auto;margin-left: 48px;width:193px;">
                                				</ul>
                                			</div>
                                			<div class="form-group">
                                				<label>状态：</label>
                                				<select class="form-control m-r-10" id="channelStatus" onchange="selectThis()" style="list-style-type: none;width:100px;">
                                                       <option value="">请选择</option>
                                                       <option value="">未支付</option>
                                                       <option value="">待结算</option>
                                                       <option value="11">已结算</option>
                                                       <option value="12">退保中</option>
                                                       <option value="13">已退保</option>
                                                </select>
                                			</div>
                                			<button type="button" class="btn btn-primary" onclick="search()" style="position: relative;">查询</button>
                                		</form>
                                	</section>
                                
                                        
                                        <table id="gadtable" class="table table-striped table-bordered"  style="word-break:break-all;word-wrap:break-word">
                                            <thead>
                                            <tr>
                                                <th>编号</th>
                                                <th>被保险人</th>
                                                <th>被保险人身份证号</th>
                                                <th>车架号</th>
                                                <th>车牌号</th>
                                                <th>保单号</th>
                                                <th>保险公司</th>
                                                <th>险种</th>
                                                <th>所属渠道</th>
                                                <th>业务</th>
                                                <th>交强保险费(元)</th>
                                                <th>车船税(元)</th>
                                                <th>商业保险费(元)</th>
                                                <th>全保费(元)</th>
                                                <th>起保日期</th>
                                                <th>状态</th>
                                            </tr>
                                            </thead>
                                        </table>
                                       </div>
                                       
                                       <div id="tab2" class="tab-pane fade">
	                                       <div id="iframeParent">
	                                      	 <iframe width="100%" frameborder="0" id="iframe1" height="100%" scrolling="no"></iframe>
	                                       </div>
                                          
                                       </div>
                                       
            						</div>
        						</div>
    						</div>
						</div>
                      </section>
                   </div>
               </div>
            </div>
         </div>
    </div>
<!-- end page container -->
<jsp:include page="../common/footer.jsp"/>

</body>
<script>
	$(document).ready(function() {
    	App.init();
    	TableManageFixedHeader.init();
	});
	
	var checkValue = "";
	function selectThis(){
		var arr1 = [1,2,4,5,6,9,10,14];
		var arr2 = [3,7,8];
		var value = $("#channelStatus").find("option:selected").text();
		checkValue=$("#channelStatus").find("option:selected").val(); 
		if(value=="未支付"){
			checkValue = arr1;
			$("#channelStatus").find("option:selected").val(checkValue);
		}else if(value=="待结算"){
			checkValue = arr2;
			$("#channelStatus").find("option:selected").val(checkValue);
		}
	}
	
	var table;
    $(document).ready(function() {
        table = $("#gadtable").DataTable( {
            "pagingType": "simple_numbers",//设置分页控件的模式
            searching: false,//屏蔽datatales的查询框
            aLengthMenu:[15],//设置一页展示10条记录
            "bLengthChange": false,//屏蔽tables的一页展示多少条记录的下拉列表
            ordering:false,//关闭排序功能
            "oLanguage": {  //对表格国际化
                "sLengthMenu": "每页显示 _MENU_条",
                "sZeroRecords": "无匹配结果，请更换筛选条件再试",
                //  "sProcessing": "&lt;img src=’./loading.gif’ /&gt;",
                "sInfo": "当前第 _START_ - _END_ 条　共计 _TOTAL_ 条",
                "sInfoEmpty": "当前第 0 - 0 条　共计 0 条",
                "sInfoFiltered": "(从 _MAX_ 条记录中过滤)",
                "sSearch": "搜索：",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "前一页",
                    "sNext": "后一页",
                    "sLast": "尾页"
                }
            },
          //"processing": true, //打开数据加载时的等待效果
            "serverSide": true,//打开后台分页
            "ajax": {
                "url": "/insurance/queryTableData",
                "dataSrc": "aaData",
                "type":"post",
                "data": function (params) {
                    var insurant = $('#insurant').val();               
                    var insyrerId = $('#insyrerId').val();
                    var channelId = $('#channelId').val();
                    var channelStatus = $('#channelStatus').val();
                    //添加额外的参数传给服务器
                    params.insurant = insurant;                    
                    params.insyrerId = insyrerId;
                    params.channelId = channelId;
                    params.channelStatus = channelStatus; 
                }
            },
            "columns": [
                        { "bSortable": false,"data": "tid","defaultContent": '--'},
                        { "data": "insurant","bSortable": false,"defaultContent": '--'},
                        { "data": "orgIdCode" ,"bSortable": false,"defaultContent": '--'},//"bSortable",默认为true,表示是否在某一列上开启排序
                        { "data": "frameNumber" ,"bSortable": false,"defaultContent": '--'},
                        { "data": "plateNum","bSortable": false,"defaultContent": '--'},
                        { "data": "ordNum" ,"bSortable": false,"defaultContent": '--'},
                        { "data": "insyrerName" ,"bSortable": false,"defaultContent": '--'},
                        { "data": "typeInsurance" ,"bSortable": false,"defaultContent": '--'},
                        { "data": "companyRegisterName" ,"bSortable": false,"defaultContent": '--'},
                        { "data": "username" ,"bSortable": false,"defaultContent": '--'},
                        { "data": "pulsoryPremium" ,"bSortable": false,"sClass": "text-right","defaultContent": '--'},
                        { "data": "vechcleVesselTax" ,"bSortable": false,"sClass": "text-right","defaultContent": '--'},
                        { "data": "mercialPremium" ,"bSortable": false,"sClass": "text-right","defaultContent": '--'},
                        { "data": "allPremium" ,"bSortable": false,"sClass": "text-right","defaultContent": '--'},
                        { "data": "insureStartDate" ,"bSortable": false,"defaultContent": '--'}
             ],
             "columnDefs" : [
					{
    					"targets" : 1,//是操作按钮目标列
    					"data" : null,
    					"render" : function(data, type,row) {
        				//在columnDefs中,data取值和row是一样的
        				if(row.ordCode!=null){
        					var html = "<a href='#tab2' data-toggle='tab' class='btn-link' onclick='toDetail(\""+row.ordCode+"\","+row.tid+","+row.userId+")'>"+row.insurant+"</a>";
        				}
        					return html;
    					}
					},
					{
    					"targets" : 7,//是操作按钮目标列
    					"data" : null,
    					"render" : function(data, type,row) {
        				//在columnDefs中,data取值和row是一样的
        				if(row.typeInsurance==0){
        					var html = "交强险";
        				}else{
        					var html = "商业险";
        				}
        					return html;
    					}
					},
					{
    					"targets" : 15,//是操作按钮目标列
    					"data" : null,
    					"render" : function(data, type,row) {
        				//在columnDefs中,data取值和row是一样的
        				var arr1 = [1,2,4,5,6,9,10,14];
        				var arr2 = [3,7,8];
        				if(row.channelStatus!=null){
        					var list1 = $.inArray(row.channelStatus,arr1);
        					if(list1>-1){
        						var html = "未支付";
        					}
        					var list2 = $.inArray(row.channelStatus,arr2);
        					if(list2>-1){
        						var html = "待结算";
        					}
        					if(row.channelStatus==11){
        						var html = "已结算";
        					}
        					if(row.channelStatus==12){
        						var html = "退保中";
        					}
        					if(row.channelStatus==13){
        						var html = "已退保";
        					}
        				}
        					return html;
    					}
					}
			]
        } );
    } );
    function search(){
        table.ajax.reload();
    }
    
    function setIframeHeight(iframe) {
		if (iframe) {
			var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
			if (iframeWin.document.body) {
				iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
			}
		}
	};


    
    function toDetail(ordCode,orderId,userId){
    	$("#detail").removeClass("hidden").trigger("click");
    	$("#iframe1").attr("src","<%=path %>/insurance/toDetail?ordCode="+ordCode+"&tid="+orderId+"&userId="+userId);
		setTimeout(function(){
			setIframeHeight(document.getElementById('iframe'));
		},2000)
    }
    
    
    //查询所有渠道名称
    $("#channels").keyup(function () {
            var name = $("#channels").val();
            if(name!=null&&name!=""){
                $("#chs").html("");
                $("#channelId").val("");
                $.ajax({
                    url:"/channel/findAllChannelName/"+name,
                    data:{},
                    type:"get",
                    success:function (data) {
                        if(data.success){
                            var channelIds = "";
                            var chHtml = "";
                            for (var i in data.result){
                                if(data.result[i].companyRegisterName!=null){
                                    chHtml += '<li value='+data.result[i].tid+'><a href="javascript:;">'+data.result[i].companyRegisterName+'</a></li>';
                                }else{
                                    chHtml += '<li value='+data.result[i].tid+'><a href="javascript:;">'+data.result[i].contact.name+'</a></li>';
                                }
                                channelIds += "," + data.result[i].tid;
                            }
                            /*var width = parseInt($("#channel").width());*/
                            if(channelIds!=null&&channelIds!=""){
                                channelIds = channelIds.substring(1,channelIds.length);
                            }else{
                                channelIds = -1;
                            }
                            $("#chs").html(chHtml);
                            $("#chs").parent().addClass("open");
                            $("#channelId").val(channelIds);
                            $("#chs li").click(function () {
                                $("#channels").val($(this).html());
                                $("#channelId").val($(this).val());
                            })

                        }else{
                            $("#channelId").val(-1);
                        }
                    },
                    dataType:"json"
                })
            }else{
                $("#channelId").val("");
                $("#chs li").remove();
            }
        })
</script>
</html>